<template>
  <div class='app-container'>
    <el-col >
    <el-card shadow="always">
    <span style="color:#ffc0cb;font-size:12px">说明：目前支持学科和关键字条件筛选</span>
    <el-button  icon="el-icon-edit" size="medium" style="float: right;padding: 9px 15px;background-color:#67c23a;color:#fff">新增试题</el-button>
    <!-- 表单 -->
    <div class='app-container'>
    <el-form  label-width="80px" inline style="margin-top:20px" :model="form">
       <el-form-item label="jichuxueke" >
    <el-select  placeholder="请选择" style="width:200px" v-model='form.subjectID' >
      <el-option v-for='item in subjectlist' :key='item.value' 
      :label="item.label" :value="item.value"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="二级目录">
    <el-select  placeholder="请选择" style="width:200px" v-model='form.catalog'>
      <el-option label="区域一" value="shanghai"></el-option>
    </el-select>
    </el-form-item>
     <el-form-item label="标签">
    <el-select  placeholder="请选择" style="width:200px" v-model='form.tags'>
      <el-option label="无数据" value="0"></el-option>
    </el-select>
    </el-form-item>
     <el-form-item label="关键字">
    <el-input placeholder="根据题干搜索" style="width:200px" v-model='form.keyword'></el-input>
    </el-form-item>
     <el-form-item label="试题类型" label-width="80px">
    <el-select  placeholder="请选择" style="width:200px" v-model='form.questionType'>
      <el-option label="单选" value="1"></el-option>
      <el-option label="多选" value="2"></el-option>
      <el-option label="简答" value="3"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="难度">
    <el-select  placeholder="请选择" style="width:200px" v-model='form.difficulty'>
      <el-option label="简单" value="1"></el-option>
      <el-option label="一般" value="2"></el-option>
      <el-option label="困难" value="3"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="方向" >
    <el-select  placeholder="请选择" style="width:200px" v-model='form.direction'>
      <el-option label="o2o" value="1"></el-option>
      <el-option label="外包服务" value="2"></el-option>
      <el-option label="企业服务" value="3"></el-option>
      <el-option label="互联网金融" value="4"></el-option>
      <el-option label="企业咨询" value="5"></el-option>
      <el-option label="互联网" value="6"></el-option>
      <el-option label="电子商务" value="7"></el-option>
      <el-option label="其他" value="8"></el-option>
    </el-select>
    </el-form-item>
     <el-form-item label="录入人">
    <el-select  placeholder="请选择" style="width:200px" v-model='form.creator'>
      <el-option label="超级管理员" value="2"></el-option>
      <el-option label="录入管理员" value="3"></el-option>
    </el-select>
    </el-form-item>
     <el-form-item label="题目备注">
    <el-input style="width:200px" v-model='form.tags'></el-input>
    </el-form-item>
     </el-form-item>
     <el-form-item label="企业简称">
    <el-input style="width:200px" v-model='form.enterprise'></el-input>
    </el-form-item>
       <el-form-item label="城市">
        <el-select  placeholder="请选择" style="width:100px; margin-right:10px" v-model='form.city' @change='citylists'>
      <el-option :label="item.city" :value="item.city" v-for='(item,index) in citylist' :key='index'></el-option>
    </el-select>
     <el-select  placeholder="请选择" style="width:100px" v-model='form.area'>
      <el-option :label="item" :value="item" v-for='(item,index) in area' :key='index'></el-option>
    </el-select>
     </el-form-item>
     <el-button style="width:56px;height:32px;font-size:12px;padding-left:17px;margin-left:170px" @click='clear'>清除</el-button>
  <el-button type="primary" style="width:56px;height:32px;font-size:12px;padding-left:17px;margin-right:0px" @click='search'>搜索</el-button>
    </el-form>
    </div>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first"></el-tab-pane>
    <el-tab-pane label="待审核" name="second" ></el-tab-pane>
    <el-tab-pane label="已审核" name="third" ></el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth" ></el-tab-pane>
  </el-tabs>
    <el-alert
    :title="`数据一共 ${counts}条`"
    type="info"
    show-icon>
  </el-alert>
  <!-- 表格 -->
  <el-table
    :data="datalist"
    style="width: 100%;margin-top:20px;margin-bottom:20px"
    :header-cell-style="{background:'#fafafa'}">
       <el-table-column
      prop="number"
      label="试题编号"
      width='150px'>
    </el-table-column>
     <el-table-column
      prop="subject"
      label="学科"
      width='100px'>
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width='120px'>
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width='80px'
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
       width='250px'>
      <template #default={row}>
        <div v-html='row.question'></div>
      </template>
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
      width='200px'>
      <template #default="{row}">
    		{{ row.addDate | formatDate }}
         </template>
    </el-table-column>
     <el-table-column
      prop="difficulty"
      label="难度"
      width='50px'
      :formatter="formatter1">
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width='120px'>
    </el-table-column>
     <el-table-column
      prop="chkState"
      label="审核状态"
      width='120px'
      :formatter="formatter2">
    </el-table-column>
     <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width='120px'>
    </el-table-column>
     <el-table-column
      prop="chkUser"
      label="审核人"
      width='120px'>
    </el-table-column>
     <el-table-column
      prop="publishState"
      label="发布状态"
      width='120px'
      :formatter="formatter3">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="220px">
      <template #default={row}> 
      <el-row>
          <el-button type="text"   @click='detail(row)'>预览</el-button>
          <el-button type="text"  @click='shenhe(row)' :disabled='row.chkState!==0'>审核</el-button>
          <el-button type="text"  :disabled='row.publishState===1'>修改</el-button>
          <el-button type="text"  @click="xiajia(row)" :disabled='row.publishState===0'>
            <template>
              <p v-if='row.publishState===0'>下架</p>
              <p v-else='row.publishState===1'>上架</p>
            </template>
          </el-button>
          <el-button type="text" @click="del(row.id)" :disabled='row.publishState===0'>删除</el-button>
      </el-row>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      background
      :current-page.sync="params.page"
      :page-size.sync="params.pagesize"
      :total="counts"
      :page-sizes="[5, 10, 20, 50]"
      @size-change="choice"
      @current-change="choice"
      layout="->,prev,pager,next,sizes">
    </el-pagination>
    <!-- 弹框 -->
    <el-dialog title="题目预览" :visible.sync="visible">
      <div class="info">
        <div class='content'>【题型】：{{detaillist.questionType}}</div>
        <div class='content'>【编号】：{{detaillist.id}}</div>
        <div class='content'>【难度】：{{detaillist.difficulty}}</div>
        <div class='content'>【标签】：{{detaillist.tags}}</div>
        <div class='content'>【学科】：{{detaillist.subjectName}}</div>
        <div class='content'>【目录】: {{detaillist.directoryName}}</div>
        <div class='content'>【方向】：{{detaillist.direction}}</div>
      </div>
      <hr>
      <div class="question">
        <div>【题干】：</div>
        <div class='qq'>
           <template>
           <div v-html='detaillist.question'></div>
          </template>
        </div>
        <div class="option" v-if='all'>
          <div>{{detaillist.questionType}}题 选项：（以下选中的选项为正确答案）</div>
          <div v-if='dan'>
             <el-radio-group v-model="radio">
           <el-radio :label="item.isRight" class='radio'
           v-for='item in optionlist' :key='item.id'>
            {{item.title}}
            </el-radio>
          </el-radio-group>
          </div>
          <div v-if='shuang'>
            <el-checkbox-group v-model="radiolist">
           <el-checkbox :label="item.isRight" class='radio'
           v-for='item in optionlist' :key='item.id'>{{item.title}}</el-checkbox>
          </el-checkbox-group>
          </div>
        </div>
      </div>
      <hr>
      <div class="answer">
        <div>【参考答案】： <el-button type="danger" @click='view=true'>视频答案预览</el-button>
         <el-row v-if='view'>
          <video :src="detaillist.videoURL" controls='controls'  class='video'></video>
        </el-row>
        </div>
      </div>
        <hr>
        <div class="detanswer">
          <div>【答案解析】：</div>
          <div class='detail'>
            <template>
           <div v-html='detaillist.answer'></div>
          </template>
          </div>
        </div>
        <hr>
        <div class="tag">
          <div>【题目备注】：{{detaillist.remarks}}</div>
        </div>
    <div slot="footer" class="dialog-footer">
    <el-button @click="close">关 闭</el-button>
  </div>
</el-dialog>
<!-- 审核 -->
<el-dialog title="题目审核" :visible.sync="visible1">
    <el-radio v-model="radio1" :label='1'  @change='changeRadio($event)'>通过</el-radio>
    <el-radio v-model="radio1" :label='2'  @change='changeRadio($event)'>拒绝</el-radio>
    <el-input
    style='margin-top: 10px'
  type="textarea"
  :rows="2"
  placeholder="请输入审核意见"
  v-model="textarea">
</el-input>
   <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click='submit(row)'>确 定</el-button>
  </div>
</el-dialog>
  </el-card>
  </el-col>
  </div>
</template>

<script>
import citylist from '@/api/hmmm/citys'
import moment from 'moment'
import {choice,subject,detail,remove,choicePublish,choiceCheck} from '@/api/hmmm/questions'
export default {
data(){
  return{
    datalist:[],
    form:{
      // keyword:''
    },
    params:{
      page:1,
      pagesize:5

    },
    counts:0,
    // 学科列表
    subjectlist:[],
    // 详情列表
    detaillist:{},
    // 选项列表
    optionlist:[],
    // 弹框
    visible:false,
    // 正确的答案选项
    radio:1,
    radiolist:[1],
    all:true,
    dan:false,
    shuang:false,
    view:false,
    activeName:'first',
    // 城市列表
    citylist:citylist,
    city:[],
    area:[],
    obj:{
      questionType:[
      {id:'1',value:'单选'},
      {id:'2',value:'多选'},
      {id:'3',value:'简答'}
    ],
    difficulty:[
      {id:'1',value:'简单'},
      {id:'2',value:'一般'},
      {id:'3',value:'困难'}
    ],
    chkState:[
      {id:0,value:'待审核'},
      {id:1,value:'通过'},
      {id:2,value:'拒绝'}
    ],
     publishState:[
      {id:1,value:'上架'},
      {id:0,value:'下架'}
    ],
    },
    // 题目审核
    visible1:false,
    // 审核意见
    textarea: '',
    // 审核id
     row:{},
     radio1:1,
     id:0
  }
},
created(){
  // 列表
this.choice()
// 学科列表
this.subject()
},
methods: {
    // 获取列表
async choice(){
  // console.log(111111);
 const res = await choice(this.params)
 this.datalist=res.data.items
 console.log(res,'hhhhhh');
 this.counts=res.data.counts
 this.params.page=+res.data.page
//  console.log(this.datalist,'111111111111');
},
// 
formatter(row, column, cellValue, index){
//  let arr =Object.entries(obj)
//  console.log(arr,'aaaaaaaa');
 const obj = this.obj.questionType.find(item => item.id === cellValue)
  return obj ? obj.value : '未知'
},
formatter1(row, column, cellValue, index){
 const obj = this.obj.difficulty.find(item => item.id === cellValue)
  return obj ? obj.value : '未知'
},
formatter2(row, column, cellValue, index){
 const obj = this.obj.chkState.find(item => item.id === cellValue)
  return obj ? obj.value : '未知'
},
formatter3(row, column, cellValue, index){
 const obj = this.obj.publishState.find(item => item.id === cellValue)
  return obj ? obj.value : '未知'
},
// 学科
async subject(){
const res = await subject()
// console.log(res,'fghjk');
this.subjectlist=res.data
},
// 清除表单
clear(){
this.form={}
},
// 搜索表单
async search(){
  const res =await choice({...this.form,...this.params})
  console.log(res,'999999999');
  this.datalist=res.data.items
  this.counts=res.data.counts
},
// 预览
async detail(row){
this.visible = true
const res = await detail({id:row.id})
console.log(res);
this.detaillist=res.data
// console.log(this.detaillist,'4567894567');
this.optionlist=res.data.options
// console.log(this.optionlist,'oooooooooooooo');
  if(this.detaillist.questionType==='1'){
    this.detaillist.questionType='单选'
    this.all=true
    this.dan=true
    this.shuang=false
  }else if(this.detaillist.questionType==='2'){
    this.detaillist.questionType='多选'
    this.all=true
    this.dan=false
    this.shuang=true
  }else if(this.detaillist.questionType==='3'){
    this.detaillist.questionType='简答'
    this.all=false
  }
  if(this.detaillist.difficulty==='2'){
    this.detaillist.difficulty='一般'
  }else if(this.detaillist.difficulty==='1'){
    this.detaillist.difficulty='简单'
  }else if(this.detaillist.difficulty==='3'){
    this.detaillist.difficulty='困难'
  }

},
// 删除
async del(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          type: 'warning'
        })
        this.$message.success('删除成功')
      await remove({id:id})
      this.choice()
},
// 审核
async shenhe(row){
  this.visible1=true
  this.row=row
},
// 审核选择
changeRadio(val){
this.id=val
console.log(this.id)
},
// 审核取消
cancel(){
 this.visible1=false
 this.textarea=''
},
// 审核确定
async submit(row){
  console.log(row)
  console.log(this.textarea);
  console.log(this.id);
if(this.textarea===''){
    this.$message.warning('请输入审核意见')
  // alert('请输入审核意见')
  }else{
  if(this.id===1){
    this.row.chkRemarks=this.textarea
    this.row.chkState=1
  } else if(this.id===2){
    this.row.chkRemarks=this.textarea
    this.row.chkState=2
  }
   const res=await choiceCheck({chkRemarks:this.textarea,chkState:this.row.chkState,id:this.row.id})
  console.log(res);
  this.$message.success('操作成功')
  this.visible1=false
  this.choice()
  this.textarea=''
  }
}
,
// 下架
async xiajia(row){
      this.row=row
      let type = ''
      if(row.publishState===1){
        type='上架'
      }else{
        type='下架'
      }
      await this.$confirm(`您确认${type}这道题目吗?`, '提示', {
          type: 'warning'
        })
      await choicePublish(this.row)
        this.$message.success(`${type}成功`)
      this.row.publishState=0
      // this.choice({id:row.id})
}
,
// 筛选审核状态
async handleClick(tab,enent){
  console.log(tab.index);
  if(tab.index==='0'){
    console.log(1111111);
     const res1=await choice(this.params)
     console.log(res1,'111111111');
    this.counts=res1.data.counts
  }else if(tab.index>=1){
    let chkState=tab.index-1
    const res =await choice({...this.params,chkState:chkState})
    console.log(res,'lalalaal');
    this.datalist=res.data.items
    this.counts=res.data.counts
  }
},
// 关闭弹框
close(){
  this.visible = false
  this.view=false
},
// 城市渲染
citylists(value){
  this.citylist.forEach(ele=>{
    this.city.push(ele.city)
  })
  let id = 0
 id= this.city.findIndex(ele=>{
    return ele===value
  }
  )
    this.area=this.citylist[id].area
}

},
filters: { 
    formatDate (val){
        return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
},
}
</script>

<style scoped lang='less'>
.info{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  .content{
    width: 25%;
    margin-bottom: 20px;
  }
}
 .radio{
  display: block;
  margin: 10px 0;
}
.option{
margin-top: 40px;
}
.qq{
  margin-top: 10px;
  color:#5858ff
}
.detail{
  margin: 15px 0;
}
.video{
  width: 400px;
}
</style>

 